import React from 'react';
import moment from 'moment';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { DatePicker } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';
import * as utils from '../../../assets/js/utils/index';
import IScroll from '../../../assets/js/libs/iscroll';
import * as Request from '../../../services/home/radar/index';
import Css from '../../../assets/css/home/cloud/index.css';

class Cloud extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            startTime: moment().subtract(2, 'hour'),
            endTime: moment(),
            cloudList: [],
            aCloudList: []
        }
        this.myScroll = null;
        this.scrollY = 0;
        this.index = 1;
        this.timer = null;
    }

    componentDidMount(){
        this.getCloudData();
    }

    //开始时间确认
    startTimeOk(value){
        this.setState({ startTime: value }, () => {
            this.getCloudData();
            this.index = 0;
        });
    }

    //结束时间确认
    endTimeOk(value){
        this.setState({ endTime: value }, () => {
            this.getCloudData();
            this.index = 0;
        });
    }

    //获取卫星产品数据
    getCloudData(){
        const { startTime, endTime } = this.state;
        Request.getCloudData({ startTime, endTime }).then(res => {
            if(res.retcode === '1' && res.data.length > 0 ){
                res.data.map((item, index) => item.checked = index === 0 ? true : false);
                this.setState({ cloudList: res.data, aCloudList: [res.data[0]] }, () => {
                    this.carousel();
                    this.eventScroll(); 
                });
            }
        });
    }

    //产品数据轮播展示
    carousel(){
        const aTempCloudList = utils.deepClone(this.state.cloudList);
        clearInterval(this.timer);
        if(aTempCloudList.length > 0){
            this.timer = setInterval(() => {
                if(this.index > aTempCloudList.length-1){ this.index = 0;this.myScroll.scrollTo(0, 250, 300, IScroll.utils.ease.quadratic); }
                aTempCloudList.map(item => item.checked = false);
                aTempCloudList[this.index].checked = true;
                this.setState({ cloudList: aTempCloudList, aCloudList: [aTempCloudList[this.index]]}, () => {
                    if(this.index < aTempCloudList.length-3){ this.handleScroll('up'); }
                });
                this.index++;
            }, 1000);
        }
    }

    //卫星列表选择
    selectCloudItem(index){
        const aTempCloudList = utils.deepClone(this.state.cloudList);
        aTempCloudList.map(item => item.checked = false);
        aTempCloudList[index].checked = true;
        this.index = index;
        this.setState({ cloudList: aTempCloudList }, () => {
            this.filterProduct(aTempCloudList[index].id);
        });
    }

    //添加云图列表滚动事件
    eventScroll(){
        document.getElementById('scroll-classify').addEventListener('touchmove',function(e){ e.preventDefault(); }, false);
        this.myScroll = new IScroll('#scroll-classify', {
            scrollX: false,
            scrollY: true,
            preventDefault: true
        });
    }

    //处理点击滚动事件
    handleScroll(type){
        const offsetHeight = Math.round(this.refs['item0'].offsetHeight-15);
        const { y } = this.myScroll;
        const iTopHeight = type === 'up' ? y-offsetHeight : y+offsetHeight;
        this.myScroll.scrollTo(0, iTopHeight, 300, IScroll.utils.ease.quadratic);
    }

    //筛选产品
    filterProduct(filterId){
        const aTempCloudList = this.state.cloudList.filter(item => item.id === filterId);
        this.setState({ aCloudList: aTempCloudList });
    }

    componentWillUnmount(){
        clearInterval(this.timer);
        this.setState = (state, callback) => { 
            return ; 
        }
    }

    render(){
        const { cloudList, aCloudList, startTime, endTime } = this.state;
        return (
            <div className={Css['sate']}>
                <div className={Css['sate-wrapper']}>
                    {/* 时间选择 */}
                    <div className={Css['select-wrapper']}>
                        <div className={Css['date-wrapper']}>
                            <div className={Css['clock']}><ClockCircleOutlined style={{color:'#B7FDFF',fontSize:'0.13rem'}} /></div>
                            <div className={Css['title']}>时间选择：</div>
                        </div>
                        <div className={Css['select-contents']}>
                            <DatePicker 
                                locale={locale} 
                                showTime 
                                defaultValue={startTime}
                                onOk={(value) => this.startTimeOk(value)}
                                suffixIcon={<div className="clock-icon"></div>}
                                style={{width:'163px',minWidth:'auto',marginRight:'0.12rem'}} 
                            />
                            <DatePicker 
                                locale={locale} 
                                showTime 
                                defaultValue={endTime}
                                onOk={(value) => this.endTimeOk(value)} 
                                suffixIcon={<div className="clock-icon"></div>}
                                style={{width:'163px',minWidth:'auto'}}
                            />
                        </div>
                    </div>
                    {/*云图列表选择 */}
                    <div className={Css['up']}><div className={Css['up-triangle']} onClick={() => this.handleScroll('up')}></div></div>
                    <div className={Css['radar-type']}>
                        <div id='scroll-classify' className={Css['classify-wrap']}>
                            <div>
                                {
                                    cloudList.length > 0 ? cloudList.map((item, index) => {
                                        return (
                                            <div key={index} ref={`item${index}`} className={item.checked ? Css['item']+' '+Css['active'] : Css['item']} onClick={() => this.selectCloudItem(index)}>
                                                <div className={Css['title']}>{item.data_time} 时次</div>
                                                <div className={Css['img']}>
                                                    <img src={item.path} alt='loading' />
                                                </div>
                                            </div>
                                        )
                                    }) : ''
                                }
                            </div>
                        </div>
                    </div>
                    <div className={Css['down']}><div className={Css['down-triangle']} onClick={() => this.handleScroll('down')}></div></div>
                </div>
                {/* 产品模块 */}
                <div className={Css['product-wrapper']}>
                    {
                        aCloudList.length > 0 ? <div className={Css['product-contents']} id='product' ref='product'>
                            <div className={Css['title']}>{aCloudList[0].data_time} 时次</div>
                            <div className={Css['img']}><img src={aCloudList[0].path} alt='loading' /></div>
                        </div> : <div className='null-item'><img src={require('../../../assets/images/common/empty.png')} alt="loading" />暂无数据</div>
                    }
                </div>
            </div>
        )
    }
}

export default Cloud;